<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>数据管理</title>
	<link href="../css/bootstrap/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="../css/bootstrap/htmleaf-demo.css">
	 <link href="../css/bootstrap/bootstrap.css" rel="stylesheet">  
    <link href="../css/fileInput/fileinput.css" rel="stylesheet">  
	<style type="text/css">
		#dataTable table tr:hover td { background-color: palegoldenrod; }
	</style>
	<!-- 教程http://www.htmleaf.com/jQuery/Table/201803265040.html -->
</head>
<body>
	 <form id="uploadimg-form" style="padding-top: 3%;padding-left: 20%;width: 40%;">
	 <label>投资数据导入：</label>
      <input id="f_upload" type="file" class="file" data-show-preview="false"/>
      <a href="javascript:downExcel();" >下载模板</a>
	</form>
	<div class="htmleaf-container">
		<div style="margin:auto; width:80%;padding:2em 0;">
	       
	      <!--   <div style="margin-bottom:10px;"><input type="button" onclick="doLoad(this)" value="加载随机数据" class="btn btn-default" /></div> -->
	        <div id="dataTable" class="table table-striped table-bordered" cellspacing="0" width="80%">
	            <!--<thead>
	                <tr>
	                    <th data-ray-field="firstName">First Name</th>
	                    <th data-ray-field="lasName">Last Name</th>
	                    <th data-ray-field="gender">Gender</th>
	                    <th data-ray-field="email">Email</th>
	                    <th data-ray-field="title">Title</th>
	                    <th data-ray-field="city">City</th>
	                </tr>
	            </thead>-->
	        </div>
	        
	    </div>
	 
	</div>
	
	

	<script src="../js/jquery-3.3.1.min.js" type="text/javascript"></script>
	<script src="../js/bootstrap/bootstrap.js"></script>
	<script src="../js/bootstrap/raydreams.js"></script>
	<script src="../js/bootstrap/data.js"></script>
  	<script src="../js/layer/layer.js"></script>
    <script src="../js/fileInput/fileinput.js"></script>  
    <script src="../js/fileInput/locales/zh.js"></script>  
	<script type="text/javascript">

		// the data table itself
	        var dataTable = null;

	        jQuery(document).ready(function () {

	        	dataTable = jQuery("#dataTable").raytable({
	            	datasource: { data: [], keyfield: 'id' },
	            	columns: [
	                    //{ title: "手机号", icons: [{ glyph: "glyphicon-info-sign", handler: iconAction, data:"id" }], renderIf: isManager },
	                    { title: "手机号",field: "phone",  sort:false },
	                    { title: "投资金额(元)",field: "amount",  sort: true },
	                    { title: "最后一笔投资时间",field: "investTime",  sort: true }
	                    
	                    //{ title: "Delete", icons: [{ glyph: "glyphicon-trash", handler: iconAction, data: "id" }] }
	                ],
	            	pagesize: 15,
	            	maxPageButtons: 5,
	            	rowNumbers: true,
	            	rowClickHandler: rowAction
	        	});

	            //jQuery(".glyphicon").css('cursor', 'pointer');
	            
	            // load some default
	            doLoad(jQuery("#dataTable"));
	                                 
	        });
			
			// load some data
	        function doLoad(sender) {
	        	$.ajax({
	                url: "/ac/getAcInvestList",
	                type: "GET",
	                datatype:"JSON",
	                data: {},
	                success: function (result) {
	                	if(result.errno==302){
	               		 	window.location.href="login.html";
	               		}
	                	for(var i=0,len=result.data.length;i<len;i++){
	                		result.data[i].investTime = stampToTime(result.data[i].investTime,1)
	                	}
	                	
	                	   dataTable.data(result.data,'id');
	                },
	                error: function () {
	                	layer.alert("数据加载失败");
	                }
	            });
	           
	        }

			// icon clicked event handler
	        function iconAction(event)
	        {
	            // jquery to get the record ID back out
	            var data = jQuery(event.target).data('ray-data');
	            alert('glyph icon data is ' + data);
	            //alert('You clicked the icon with data = ' + event.data.id + ' on row ' + event.data.rowIdx );
	        }
	        
	        // row clicked handler
	        function rowAction(event)
	        {
	            // jquery to get the record ID back out
	            //var id = jQuery(event.target).data('ray-key');
	            console.log('You clicked row ' + event.data.rowIdx + ' with object ID ' + event.data.id);
	            //alert('You clicked row ' + event.data.rowIdx + ' with object ID ' + event.data.id );
	        }
	        
	        // boolean handler to determine if the cell content is rendered
	    	function isManager(item)
	    	{
	    		return (item.grade > 4);
	    	}
	    	
	    	// custom format handler
	    	function parseDate(item)
	    	{
	    		// source is ISO 8601
	    		var d = new Date(item.birthDate);
	    		return d.toDateString();
	    	}
	    	
	    	//文件上传js
	    	
	    	function downExcel(){
    	var url = window.location.origin+"/ac/page/invest-template.xlsx";
    	window.open(url);
    }
    
     
    $('#f_upload').fileinput({
        language: 'zh', //设置语言
        uploadUrl: "/ac/importExcel", //上传的地址
        allowedFileExtensions : ['xls', 'xlsx'],//接收的文件后缀,
        maxFileCount: 1,
        enctype: 'multipart/form-data',
        uploadAsync: true, //默认异步上传
        showUpload: true, //是否显示上传按钮
        showCaption: true,//是否显示标题
        browseClass: "btn btn-primary", //按钮样式             
        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>", 
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
        uploadExtraData:$('#uploadimg-form').serialize()
    });
    
    
  //异步上传返回结果处理
    $("#f_upload").on("fileuploaded", function (event, data, previewId, index) {
    		//alert(data.jqXHR.responseJSON.errno);
    		var jsonData = data.jqXHR.responseJSON;
    		if(jsonData.errno==302){
       		 	window.location.href="login.html";
       		}else{
       			if(jsonData.errno==200){
        			layer.alert("导入成功");
        		}else{
        			layer.alert(jsonData.errmsg);
        		}
       		}
           
        });
  
    //上传前
    $('#f_upload').on('filepreupload', function(event, data, previewId, index) {
       var form = data.form, files = data.files, extra = data.extra,
        response = data.response, reader = data.reader;
    });
    function stampToTime(stamp,type){
        let date = new Date(stamp),
            year = date.getFullYear(),
            month = date.getMonth()+1,
            day = date.getDate(),
            hour = date.getHours(),
            minutes = date.getMinutes(),
            seconds = date.getSeconds();

        function GSH(num){
            if(num<10) return '0'+num;
            return num;
        }

        if(type===1) return GSH(year)+'.'+GSH(month)+'.'+GSH(day);
        if(type===2) return GSH(hour)+':'+GSH(minutes);
        if (type === 3) return GSH(year) + '.' + GSH(month) + '.' + GSH(day) + ' ' + GSH(hour) + ':' + GSH(minutes) + ':' + GSH(seconds);
    };
	    </script>
</body>
</html>